@use '@angular/material/core/tokens/token-utils';
@use '@angular/material/core/style/sass-utils';

// The prefix used to generate the fully qualified name for tokens in this file.
$prefix: (ngm, color);

@function get-unthemable-tokens() {
  @return (
  );
}

@function get-color-tokens() {
  @return (
    surface-container-low: null,
    surface-container: null,
    surface-container-high: null,
    surface: null,
  );
}

@function get-token-slots() {
  @return sass-utils.deep-merge-all(
    get-unthemable-tokens(),
    get-color-tokens(),
  );
}

@include token-utils.use-tokens($prefix, get-token-slots()) {
  .ngm-formly-chart-type__container {
    background-color: var(#{token-utils.get-token-variable(surface-container-high)});
    &:hover:not(:disabled) {
      --tw-ring-color: rgb(234 179 8 / 0.5); // ring-yellow-500/50
      --tw-ring-offset-color: var(#{token-utils.get-token-variable(surface)});
      background-color: var(#{token-utils.get-token-variable(surface-container-low)});
    }
    &:focus {
      --tw-ring-offset-color: var(#{token-utils.get-token-variable(surface)});
      background-color: var(#{token-utils.get-token-variable(surface)});
    }
    &:disabled {
      --tw-ring-color: var(#{token-utils.get-token-variable(surface)});
      background-color: var(#{token-utils.get-token-variable(surface-container-low)});
    }
  }

  .surface-content {
    background-color: var(#{token-utils.get-token-variable(surface)});
  }
}

:host {
  --mat-expansion-header-text-size: 12px;
  @apply flex-1 flex flex-col border border-transparent;
}
